<template>
	<view class="gjl-components">
		<template v-if="!needPhone">
			<view class="user-info">
				<view class="user-img">
					<u-image :src="vuex_userInfo.avatarUrl" mode="" width="100%" height="100%"></u-image>
				</view>
				<view class="user-name">
					<view class="nickname">{{vuex_userInfo.nickName || '请授权获取用户名'}}</view>
				</view>
			</view>
			<view class="line">
				<u-line color="#f5f5f5" />
			</view>
			<view class="content">
				<view class="tip-box">
					<view class="title">
						申请以下权限
					</view>
					<view class="dec">
						获得你的公开信息（昵称、头像等）
					</view>
				</view>
				<view class="button-box">
					<view class="btn">
						<u-button @click="btnClick(1)"
							:custom-style="{color: '#fff',background: 'rgba(248,89,89,1)',fontSize: '32rpx'}"
							lang="zh_CN">头条授权
						</u-button>
					</view>
					<view class="btn">
						<u-button @click="btnClick(2)" :custom-style="{fontSize: '32rpx'}">邀请码</u-button>
					</view>
				</view>
				<view class="footer-tip">
					首次授权用户如有邀请码,建议填写
				</view>
			</view>
		</template>
		<template v-else>
			<view class="user-info">
				<view class="user-img">
					<u-image :src="vuex_userInfo.avatarUrl" mode="" width="100%" height="100%"></u-image>
				</view>
				<view class="user-name">
					<view class="nickname">{{vuex_userInfo.nickName || '请授权获取用户名'}}</view>
				</view>
			</view>
			<view class="line">
				<u-line color="#f5f5f5" />
			</view>
			<view class="content">
				<view class="tip-box">
					<view class="title">
						亲，您已授权
					</view>
					<view class="dec">
						快去同步会员信息吧
					</view>
				</view>
				<view class="form-box">
					<u-form :model="form" ref="uForm" :error-type="['toast']">
						<u-form-item label=" " left-icon="man-add">
							<u-input v-model="form.mobile.value" placeholder="请输入手机号" />
						</u-form-item>
						<u-form-item label=" " left-icon="lock">
							<u-input v-model="form.mobile_code.value" placeholder="请输入验证码" />
							<view class="code-btn" slot="right">
								<u-button @click="getMobileCode('bind_mobile')" size="mini">{{tips}}</u-button>
							</view>
						</u-form-item>
					</u-form>
				</view>
				<view class="button-box">
					<view class="btn">
						<u-button @click="btnClick(3)"
							:custom-style="{color: '#fff',background: 'rgba(248,89,89,1)',fontSize: '32rpx'}" lang="zh_CN">一键同步登录
						</u-button>
					</view>
				</view>
				<view class="footer-tip">
					<text class="text">登录注册即代表阅读并同意</text><text class="a"
						@click="jRouter({path: 'richtextIndex',query:{id:'rule_user'}})">《用户协议》</text>
				</view>
			</view>
		</template>
		<inviteModel ref="inviteModel" v-model="inviteCode"></inviteModel>
		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
			@change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	import inviteModel from './invite-model.vue';
	export default {
		components: {
			inviteModel
		},
		props: {
			needPhone: {
				type: [Boolean],
				default: false
			}
		},
		data() {
			return {
				inviteCode: '',
				form: {
					mobile: {
						value: '',
						required: true,
						test: 'mobile',
						tip: '手机号不能为空',
						testTip: '手机号不正确'
					},
					mobile_code: {
						value: '',
						required: true,
						test: '',
						tip: '请输入验证码'
					}
				},
				seconds: 60,
				tips: ''
			}
		},
		created() {
			this.getUserinfoTt()
		},
		mounted() {
			
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getMobileCode(type) {
				if(!this.form.mobile.value){
					uni.showToast({
						title: `${this.form.mobile.tip}`,
						icon: 'none'
					})
					return
				}
				if(!this.$u.test.mobile(this.form.mobile.value)){
					uni.showToast({
						title: `${this.form.mobile.testTip}`,
						icon: 'none'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					let obj = {
						mobile: this.form.mobile.value,
						event: type,
						apiLoadText: '正在获取验证码'
					}
					this.$apis.getMobileCode(obj).then((res)=>{
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				
			},
			start() {
				
			},
			// 同步登录
			phoneLogin(){
				let required = true;
				for(let i in this.form){
					if(this.form[i].required && !this.form[i].value){
						uni.showToast({
							title: `${this.form[i].tip}`,
							icon: 'none'
						})
						required = false;
						return
					}
					if(this.form[i].required && this.form[i].test && !this.$u.test.mobile(this.form[i].value)){
						uni.showToast({
							title: `${this.form[i].testTip}`,
							icon: 'none'
						})
						required = false;
						return
					}
				}
				if(!required){
					return
				}
				this.login();
			},
			// 头条获取用户信息
			getUserinfoTt() {
				let that = this;
				uni.getUserInfo({
					provider: 'toutiao',
					success: function(infoRes) {
						that.$store.commit('SET_USERINFO', infoRes.userInfo);
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			btnClick(type) {
				let that = this;
				if (type == 1) {
					this.login();
					this.$emit('login', 'MP-WEIXIN')
				}
				if (type == 2) {
					this.$refs.inviteModel.show = true;
					this.$emit('invite', 'MP-WEIXIN')
					return
				}
				if (type == 3) {
					this.phoneLogin();
					this.$emit('phone', 'MP-WEIXIN')
					return
				}
			},
			login() {
				let that = this;
				uni.login({
					provider: 'toutiao',
					success: function(loginRes) {
						console.log(loginRes)
						uni.getUserInfo({
							provider: 'toutiao',
							success: function(infoRes) {
								that.$store.commit('SET_USERINFO', infoRes.userInfo);
								that.apiLogin(loginRes,infoRes);
								console.log(infoRes);
							}
						});
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			// 同步登录
			apiLogin(loginRes, infoRes) {
				let data = {
					code: loginRes.code,
					user_info: infoRes.rawData,
					invite_code: this.inviteCode || "",
					mobile: this.form.mobile.value || '',
					mobile_code: this.form.mobile_code.value || '',
					apiLoadText: '登陆中'
				}
				this.$apis.ttAutoLogin(data).then((res) => {
					this.$emit('loginSuccess', res);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.gjl-components {
		height: 100%;
		display: flex;
		flex-direction: column;

		.line {
			height: 0;
		}

		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 30rpx;
			.form-box{
				margin-top: 30rpx;
			}
			.footer-tip {
				font-size: $h5;
				line-height: $h5;
				color: $subtext-color;
			}

			.button-box {
				box-sizing: border-box;
				padding: 72rpx 20rpx 50rpx;
				width: 100%;

				.btn+.btn {
					margin-top: 20rpx;
				}
			}

			.tip-box {
				text-align: center;

				.dec {
					font-size: 28rpx;
					margin-top: 20rpx;
				}

				.title {
					font-weight: 600;
					font-size: 36rpx;
				}
			}
		}

		.user-info {
			padding: 80rpx 0 48rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.user-img {
				width: 190rpx;
				height: 190rpx;
				border: 2px solid #fff;
				margin: 0rpx auto 0;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 1px 0px 5px #CCC;
			}

			.user-name {
				font-size: 35rpx;
				font-weight: 600;
				margin-top: 10px
			}
		}
	}
</style>
